<template>
  <div>
    <h3>Son组件</h3>
    <p>App str: {{str}}</p>
    <p>App username123: {{username123}}</p>
    <button @click="getProps">getProps</button>
  </div>
</template>

<script>
export default {
    name:'Son',
    // props 定义从父组件接收的数据的 key
    /**
     * 1. str 和 username123 都会出现在组件的vc实例对象上===> 在模板中可以直接使用
     * 2. str 和 username123 会出现在$props身上，可以在方法中通过$props获取
     * 
     * 传递的数据类型：基本数据类型可以，对象可以, 方法也可以【并且this是指向父组件的】
     */
    // 方式一：数组的写法
    props:['str', 'username123', 'car','hitSon'], 
    data(){
        return {
            str:'Son自己的Str',
            //Error : The data property "str" is already declared as a prop. Use prop default value instead.
            // 可见如果冲突 props的优先级高于 data
        }
    },
    methods:{
        getProps(){
            console.log('Son vc this: ',this)
            console.log(this.$props.str, this.$props.username123)
            // 执行父组件传递的hitSon方法， 虽然是在子组件中调用的方法，但是方法中的this是指向父组件的实例对象
            this.$props.hitSon()

            // 使用时推荐直接使用vc身上的! 
            // 1. 问题1： 自身数据data定义的也会出现在vc身上，如果同名会有冲突
            // 2. 问题2： 如果冲突了，是props优先级高？还是data优先级高？ ==》 props的优先级高于 data
            console.log(this.username123, this.str, this.car, this.hitSon())
        }
    }
}
</script>

<style>

</style>